<div class="row row-gap-4 mt-2">
  <div class="col">
    <app-home-nav
      name="Create Article"
      [useCreateArticleIcon]="true"
      [currentName]="currentNavName"
      (clickEvent)="onClickNav('Create Article')"
    ></app-home-nav>
  </div>
  <!--  <div class="col">-->
  <!--    <app-home-nav-->
  <!--      name="Articles"-->
  <!--      [currentName]="currentNavName"-->
  <!--      (clickEvent)="onClickNav('Articles')"-->
  <!--    ></app-home-nav>-->
  <!--  </div>-->
  <div class="col">
    <app-home-nav
      name="Tags"
      [currentName]="currentNavName"
      (clickEvent)="onClickNav('Tags')"
    ></app-home-nav>
  </div>
  <div class="col">
    <app-home-nav
      name="Tag Groups"
      [currentName]="currentNavName"
      (clickEvent)="onClickNav('Tag Groups')"
    ></app-home-nav>
  </div>
  <div class="col">
    <app-home-nav
      name="Contents"
      [currentName]="currentNavName"
      (clickEvent)="onClickNav('Contents')"
    ></app-home-nav>
  </div>
  <div class="col">
    <app-home-nav
      name="Content Groups"
      [currentName]="currentNavName"
      (clickEvent)="onClickNav('Content Groups')"
    ></app-home-nav>
  </div>
</div>

<div class="row overflow-y-scroll yw-scrollbar mt-3 mb-2 me-0">
  <div class="col">
    @switch (currentNavName) {
      @case ("Content Groups") {
        <app-section-groups-header></app-section-groups-header>
      }
      @case ("Contents") {
        <app-home-sections-header></app-home-sections-header>
      }
      @case ("Tag Groups") {
        <app-home-tag-groups-header></app-home-tag-groups-header>
      }
      @case ("Tags") {
        <app-home-tags-header></app-home-tags-header>
      }
      @default {
        <app-home-posts-header></app-home-posts-header>
      }
    }
  </div>
</div>

<div
  class="row overflow-y-scroll yw-scrollbar me-0"
  style="height: calc(100vh - 12.5rem)"
>
  <div class="col">
    @switch (currentNavName) {
      @case ("Content Groups") {
        <app-home-section-groups
          (itemEvent)="onClickSectionGroups($event)"
          class="d-flex flex-column gap-2"
        ></app-home-section-groups>
      }
      @case ("Contents") {
        <app-home-sections
          (itemEvent)="onClickSections($event)"
          class="d-flex flex-column gap-2"
        ></app-home-sections>
      }
      @case ("Tag Groups") {
        <app-home-tag-groups
          (itemEvent)="onClickTagGroups($event)"
          class="d-flex flex-column gap-2"
        ></app-home-tag-groups>
      }
      @case ("Tags") {
        <app-home-tags
          (itemEvent)="onClickTags($event)"
          class="d-flex flex-column gap-2"
        ></app-home-tags>
      }
      @default {
        <app-home-posts
          [params]="postsParams"
          (pageableEvent)="onPageablePosts($event)"
          (tagItemEvent)="onTagItemEvent($event)"
          class="d-flex flex-column gap-2"
        ></app-home-posts>
      }
    }
  </div>
</div>

<div class="row w-100 py-2 mx-0 bg-body-tertiary">
  <div class="col px-0">
    <app-home-footer
      [showPageable]="showPageable"
      [showBackBtn]="showBackBtn"
      [showXBtn]="showXBtn"
      [pageable]="pageable"
      (previousPageEvent)="onPreviousPageEvent($event)"
      (pageEvent)="onPage($event)"
      (nextPageEvent)="onNextPageEvent($event)"
      (backBtnEvent)="onBackBtn()"
      (xBtnEvent)="onXBtn()"
    ></app-home-footer>
  </div>
</div>
